<template>
  <div class="goods-detail">
    <!-- 轮播图 -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      v-if="goodsInfo.gallery"
    >
      <van-swipe-item
        v-for="item in goodsInfo.gallery"
        :key="item.id"
        style="width: 375px"
      >
        <img class="banner-img" :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="info" v-if="goodsInfo.info">
      <h2>{{ goodsInfo.info.name }}</h2>
      <p class="desc">{{ goodsInfo.info.goods_brief }}</p>
      <p class="price">￥{{ goodsInfo.info.retail_price }}</p>
    </div>
    <van-cell is-link title="请选择规格数量" @click="show = true" />
    <div class="attribute">
      <div class="title">商品参数</div>
      <ul>
        <li v-for="(item, index) in goodsInfo.attribute" :key="index">
          <span class="attr_name">{{ item.name }}: </span>
          <span class="attr_value">{{ item.value }}</span>
        </li>
      </ul>
    </div>
    <!-- 详情描述 -->
    <div
      class="goods_desc"
      v-if="goodsInfo.info"
      v-html="goodsInfo.info.goods_desc"
    ></div>
    <!-- 常见问题 -->
    <div class="issue">
      <div class="title">常见问题</div>
      <div class="item" v-for="item in goodsInfo.issue" :key="item.id">
        <div class="question">{{ item.question }}</div>
        <div class="answer">{{ item.answer }}</div>
      </div>
    </div>
    <!-- 商品推荐 -->
    <div class="goodslist">
      <div class="title">大家都在看</div>
      <ul>
        <router-link
          tag="li"
          v-for="item in goodsInfo.productList"
          :key="item.id"
          @click="itemClick(item)"
          :to="`/goods/goodsdetail?id=${item.id}`"
        >
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </router-link>
      </ul>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <div class="collectBtn" @click="collectBtnClick">
        <van-icon
          :name="goodsInfo.collected ? 'star' : 'star-o'"
          :color="goodsInfo.collected ? '#b4282b' : ''"
        />
      </div>
      <div class="cartBtn" @click="toCart()">
        <van-icon name="cart-o" :badge="goodsInfo.allnumber" />
      </div>
      <div class="buy" @click="nowBuy">立即购买</div>
      <div class="addCart" @click="addCartBtnClick">加入购物车</div>
    </div>
    <!-- popup弹窗 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="pop-content" v-if="goodsInfo.info">
        <div class="pop-head">
          <img :src="goodsInfo.info.primary_pic_url" alt="" />
          <div>
            <p class="price">￥{{ goodsInfo.info.retail_price }}</p>
            <p>请选择数量</p>
          </div>
        </div>
        <div class="buyNum">
          <p>数量</p>
          <van-stepper v-model="num" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { detailaction, addcollect, addCart } from "@/api/goods";
export default {
  data() {
    return {
      goodsInfo: {},
      show: false, // 规格数量弹窗
      num: 1, // 购买数量
    };
  },
  methods: {
    // 收藏点击
    async collectBtnClick() {
      this.goodsInfo.collected = !this.goodsInfo.collected;
      const { data } = await addcollect({
        goodsId: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      });
      if (data == "success") {
        const text = this.goodsInfo.collected ? "收藏成功" : "取消收藏";
        this.$toast(text);
      } else {
        this.$toast("网络不佳,请稍后再试!");
      }
    },
    // 加入购物车
    async addCartBtnClick() {
      if (this.show) {
        const { data } = await addCart({
          goodsId: this.$route.query.id,
          number: this.num,
          openId: localStorage.getItem("openId"),
        });
        if (data == "success") {
          this.$toast("已添加到购物车!");
          // 添加成功后手动增加allnumber,不需要重新获取数据
          this.goodsInfo.allnumber += this.num;
        } else {
          this.$toast("网络不佳,请稍后再试!");
        }
      } else {
        this.show = true;
      }
    },
    // 立即购买
    nowBuy() {
      this.$toast("功能暂不开放");
    },
    toCart() {
      this.$router.push("/cart");
    },
    // 获取商品信息
    async getGoodsInfo() {
      const res = await detailaction({
        id: this.$route.query.id,
        openId: localStorage.getItem("openId"),
      });
      this.goodsInfo = res;
    },
  },
  created() {
    this.getGoodsInfo();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
